<template>
  <div class="bonus">
    <div class="sub-title">
      <div class="content"><span>机构名称：{{bonusItem.bonusItemName}}</span><span>年度：{{bonusItem.eccCode}}</span></div>
    </div>
    <div class="search-form flex-right">
        <el-button type="primary" plain @click="examineHandle(true)">审批通过</el-button>
        <el-button type="danger" plain @click="examineHandle(false)">审批驳回</el-button>
        <el-button type="primary" plain @click="">导出</el-button>
        <el-button type="primary" plain @click="goBack">返回</el-button>
    </div>
    <div>
      <div class="table-tile">
        <span>奖金分配明细表</span>
      </div>
      <el-table :data="tableData" v-loading="loading" border
                @selection-change="handleSelectionChange"
                :cell-class-name="lastColClass"
                :row-class-name="lastRowClass"
                :summary-method="getSummaries"
                :height="`calc(100vh - 260px )`">
<!--        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="45">
        </el-table-column>-->
        <el-table-column
          width="60px"
          prop=""
          label="序号"
          align="center"
        >
          <template slot-scope="scope">
            {{(page.currentPage - 1) * page.pageSize + scope.$index + 1}}
          </template>
        </el-table-column>
        <el-table-column
          prop="bonusItemName"
          label="人员编号"
          align="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="bonusItemName"
          label="姓名"
          align="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
        prop="bonusItemName"
        label="岗位/职务"
        align="left"
        show-overflow-tooltip
      ></el-table-column>
        <el-table-column
          prop="bonusItemName"
          label="奖金项"
          align="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="bonusItemName"
          label="开始时间"
          align="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="bonusItemName"
          label="结束时间"
          align="left"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="bonusItemName"
          label="奖金金额"
          align="left"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>

    </div>
  </div>
</template>

<script>
import {deleteBatch, getChildren, getPid} from '@/api/bonus/items'
export default{
  name:"poolDetail",
  components:{
  },
  data() {
    return {
      loading:false,
      page:{
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      tableData: [],
      searchForm: {bonusItemDeptId:''},
      bonusItemDeptIdOptions:[], //机构
      bonusItemsScopeOptions:[
        {label:'公共',value:'公共'},
        {label:'私有',value:'私有'}
      ], //奖金范围
      multipleSelection: [],
      ids:[],
      bonusItem:{},
      columns:[
        {
          label:'1月',
          prop:'1'
        },
        {
          label:'2月',
          prop:'2'
        },
        {
          label:'3月',
          prop:'3'
        },
        {
          label:'4月',
          prop:'4'
        },
        {
          label:'5月',
          prop:'5'
        },
        {
          label:'6月',
          prop:'6'
        },
        {
          label:'12月',
          prop:'12'
        }
      ]
    }
  },
  computed: {

  },
  created(){

  },
  methods:{
    init(data,deptId){
      this.bonusItem = data ;
      this.deptId = deptId ;
      this.onLoad() ;
      //获取二级机构
      //this.getSubOrg() ;
      //获取奖金项范围（字典）
      //this.getBonusItemScope() ;
    },
    handleSearch(){
      this.onLoad() ;
    },
    onLoad(){
      this.tableData = [
        {
          1:'1',
          2:'3',
          4:'4',
          5:'5',
          6:'6',
          12:'12',
        },
        {
          1:'1',
          2:'3',
          4:'4',
          5:'5',
          6:'6',
          12:'12',
        },
        {
          1:'1',
          2:'3',
          4:'4',
          5:'5',
          6:'6',
          12:'12',
        },
        {
          1:'1',
          2:'3',
          4:'4',
          5:'5',
          6:'6',
          12:'12',
        }
      ]
      // this.loading = true ;
      // getChildren(this.bonusItem.id,this.deptId).then(res=>{
      //   if (res.data.code == 0){
      //     this.tableData =  res.data.data.filter((data) => {
      //       return !this.searchForm.bonusItemName || data.bonusItemName.includes(this.searchForm.bonusItemName)
      //     })
      //     //this.doLayout() ;
      //   }else{
      //     this.$message.error(res.data.msg)
      //   }
      //   this.loading = false ;
      // }).catch(()=>{
      //   this.loading = false ;
      // })
    },
    handleSelectionChange(list){
      this.multipleSelection = list ;
      this.ids = this.multipleSelection.map((ele) => {
        return ele.id
      })
    },
    add(){
      this.$refs.handleForm.init('add',{},this.bonusItem)
    },
    edit(item){
      this.$refs.handleForm.init('edit',item,this.bonusItem)
    },
    decompose(item){

    },
    refresh(){
      this.onLoad() ;
    },
    goBack(){
      this.$emit('close')
    },
    getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      },
    sumCols(row){
       let props = ['1','2','4','5','6','12']
       let  values = []
       for (let key in row){
         if (props.includes(key)){
           values.push(row[key])
         }
       }
      let sum = 0
      sum = values.reduce((prev, curr) => {
        const value = Number( curr ? curr : 0);
        if (!isNaN(value)) {
          return Number(prev) + Number(curr);
        } else {
          return Number( prev);
        }
      }, 0);

      return sum
    } ,
    lastColClass({row, column, rowIndex, columnIndex}){
      if (column.property == 'rowCount'){
        return 'lastCell'
      }
    },
    lastRowClass({row, column, rowIndex, columnIndex}){
      //console.log("rowIndex:",rowIndex)
    },
    examineHandle(flag){
      let msg = ''
      if (flag){
        msg = "确定要通过吗?"
      }else{
        msg = "确定要驳回吗?"
      }
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {

        })
        .catch(() => {

        });
    },

  }
}
</script>
<style scoped>

</style>
